<template>
  <div class="container">
    <navbar class="de-navbar" :vaniconL="true" :noRight="true" :noLeft="false" :vaniconR="true" iconNameL="arrow-left" iconNameR="flag-o" @clickLeft="goBack" @clickRight="release">
      应邀列表
    </navbar>

    <div style="height: 0.45rem"></div>

    <div class="box-card-wrapper">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <el-card class="box-card" v-for="(item, index) in list" :key="index">
          <div slot="header" class="header">
            <el-button v-if="item.status === 0" type="text" @click="contact(item)">同意合作</el-button>
            <el-button v-else type="text" @click="$router.push({ path: '/cooperation_cooperate', query: { projectId, userId: item.userId } })">查看合作</el-button>
          </div>
          <div class="desc">
            <div class="title">应邀人：</div>
            <p class="content success">{{ item.userName }}</p>
          </div>
          <div class="desc">
            <div class="title">项目完成周期：</div>
            <p class="content success">{{ item.cycle }}</p>
          </div>
          <div class="desc">
            <div class="title">报价(元)：</div>
            <p class="content success">￥{{ item.offer }}</p>
          </div>
          <div class="desc">
            <div class="title">留言：</div>
            <p class="content warning">{{ item.content }}</p>
          </div>
        </el-card>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
/**
 * @author leonard
 * @date 2021/01/18
 * @description 应邀列表
 */
import { get_history_project_details, update_project_cooperate } from '@/api/cooperation'
import navbar from "@/components/navbar"
import { Toast, Dialog } from "vant"

export default {
  components: {
    navbar
  },
  data() {
    return {
      projectId: this.$route.query.projectId,
      list: [],
      isLoading: false
    }
  },
  mounted() {
    this.renderList()
    document.body.addEventListener('touchmove', this.touchmoveFn, {passive: false})
  },
  beforeDestroy() {
    document.body.removeEventListener('touchmove', this.touchmoveFn)
  },
  methods: {
    // touchmove事件回调
    touchmoveFn(e) {
      e.preventDefault()
    },
    // 下拉刷新
    onRefresh() {
      this.renderList()
    },
    // 渲染列表
    renderList() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中..."
      })
      const { projectId } = this
      get_history_project_details({ projectId }).then(res => {
        if (res.data.status === 200) {
          this.list = res.data.info
        }
      }).finally(() => {
        this.$toast.clear()
        this.isLoading = false
      })
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    // 发布
    release() {
      this.$router.push({ path: '/release' })
    },
    // 邀约合作
    contact({ userId }) {
      Dialog.confirm({
        title: "提示",
        message: "是否确认该合作？",
      }).then(() => {
        const { projectId } = this
        update_project_cooperate({ cooperate: 1, userId, projectId }).then((res) => {
          if (res.data.status == 200) {
            Toast.success("确认成功")
            this.renderList()
          } else {
            Toast.fail("确认出错")
            this.renderList()
          }
        })
      }).catch(() => {
        Toast.success('已取消')
      });
      // Dialog.alert({
      //   title: '联系方式',
      //   message: `微信: 12312312333\n邮箱: 12312312333@qq.com`,
      //   messageAlign: 'left'
      // }).then(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.success {
  color: #67C23A;
}
.warning {
  color: #E6A23C;
}
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
  text-align: center;
  .de-navbar {
    width: 100%;
    height: 0.45rem;
    position: fixed;
    top: 0;
    z-index: 10;
    background: #4775d9;
    background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
    color: #fff;
  }
  /deep/ .van-icon-flag-o {
    font-size: .32rem!important;
  }
  .box-card-wrapper {
    flex: 1;
    overflow-y: scroll;
    .van-pull-refresh {
      padding-top: 0.15rem;
      .box-card {
        width: 95%;
        display: inline-block;
        margin-bottom: 0.15rem;
        border-radius: 8px;
        /deep/ .el-card__header {
          padding: 0 20px;
        }
        .header {
          text-align: right;
        }
        /deep/ .el-card__body {
          text-align: left;
          min-height: .666667rem;
        }
        .desc {
          display: flex;
          .title {
            width: 1rem;
            line-height: .266667rem;
            font-size: 15px;
            vertical-align: middle;
          }
          .content {
            flex: 1;
            line-height: .266667rem;
            font-size: 15px;
          }
        }
        .el-divider {
          margin: .133333rem 0;
        }
      }
      
    }
  }
  
  
  
}
</style>